<!DOCTYPE html>
<html>

<head>
    <title>Example</title>
    <meta name="author" content="Adam Freeman" />
    <meta name="description" content="A simple example" />
    <link rel="shortcut icon" type="image/x-icon" href="../favicon.ico">
</head>

<body>
    <form action="./html_定制input元素.html" method="post">
        <p>
            <label for="name">
                <!-- maxlength 可以在文本框中输入的字符的最大数目
                    placeholder 提示可以输入什么样的数据
                -->
                Name: <input placeholder="Your Name" maxlength="10" id="name" name="name" />
            </label>
        </p>
        <p>
            <label for="city">
                <!-- size 通过指定文本框中可见的字符数目设定其宽度（能够显示的字符数）
                -->
                City: <input placeholder="Where you live" size="10" id="city" name="city" />
            </label>
        </p>

        <p>
            <label for="fave">
                <!-- value 默认值 
                    list ==> datalist元素的id值
                -->
                City: <input list="fruitlist" value="Apple" size="10" maxlength="10" id="fave" name="fave" />
            </label>
        </p>
        <p>
            <label for="name">
                <!--disable 被禁用  获取不到值-->
                Name: <input disabled value="Adam" />
            </label>
        </p>
        <p>
            <label for="city">
                <!--readonly 只读 可以获取到值-->
                City: <input readonly list="fruitlist" value="Boston" />
            </label>
        </p>
        <p>
            <label for="password">
                <!--password 原点显示，提交的值不会变
                -->
                Password: <input type="password" placeholder="Min 6 characters" id="password" name="password" />
            </label>
        </p>
        <!-- input生成按钮 -->
        <input type="submit" value="Submit Vote" />
        <input type="reset" value="Reset Form" />
        <input type="button" value="My Button">
        <!-- input元素的其他type属性会对用户输入的数据提出更具体的要求 -->
        <p>
            <label for="price">
                <!--number
                -->
                $ per unit in your area:
                <input type="number" step="1" min="0" max="100" value="1" id="price" name="price" />
            </label>
        </p>
        <label for="range">
            <!--number
            -->
            $ per unit in your area: 1
            <input type="range" step="1" min="0" max="100" value="1" />100
        </label>
        <!-- checkbox 复选框 bool型输入 value 提交给服务器的数据值-->
        <p><input type="checkbox" value=""></p>
        <!-- radio生成一组固定选项 value 提交给服务器的数据值 checked 默认选中-->
        <p>
        <fieldset>
            <legend>Vote for your favourite fruit</legend>
            <label for="apples">
                <input type="radio" checked value="Apples" id="Apples" name="fave">
                Apples
            </label>
            <label for="oranges">
                <input type="radio" value="Oranges" id="Oranges" name="fave">
                Oranges
            </label>
            <label for="cherries">
                <input type="radio" value="Cherries" id="Cherries" name="fave">
                Cherries
            </label>
        </fieldset>
        </p>
        <!-- email,tel,url -->
        <p>
            <label for="email">
                Email:
                <input type="email" placeholder="user@domain.com" id="email" name="email" />
            </label>
        </p>
        <p>
            <label for="tel">
                Tel:
                <input type="tel" placeholder="(XXX)-XXX-XXXX" id="tel" name="tel" />
            </label>
        </p>
        <p>
            <label for="url">
                Your homepage:
                <input type="url" id="url" name="url" />
            </label>
        </p>

        <!-- 获取时间与日期 -->
        <p>
            <label for="lastbuy">
                When did you last buy:
                <input type="date" id="lastbuy" name="lastbuy" />
            </label>
        </p>
        <p>
            <label for="time">
                now:
                <input type="time" id="time" name="time" />
            </label>
        </p>
        <!-- color -->
        <p>
            <label for="color">
                Color:
                <input type="color" id="color" name="color" />
            </label>
        </p>
        <!-- search 什么都没做 -->
        <p>
            <label for="search">
                Search:
                <input type="search" id="search" name="search" />
            </label>
        </p>
        <!-- hidden 使用一些用户看不到的数据项---隐藏数据项 -->
        <input type="hidden" name="recordID" id="1234">
        <!-- image 点击可以他提交表单，并携带点击位置数据 -->
        <p><input type="image" src="../favicon.ico" name="submit"></p>
        <!-- 最后file 上传文件到服务器,表单类型为multipart/form-data才能上传文件 -->
        <p><input type="file" name="filedata"></p>
        <button type="submit">Submit Vote</button>
    </form>
    <!-- 为input准备好一批值 -->
    <!-- datalist select optgroup -->
    <datalist id="fruitlist">
        <option value="Apples" label="Lovely Apples"></option>
        <option value="Oranges">Refreshing Oranges</option>
        <option value="Cherries"></option>
    </datalist>
</body>

</html>